window.ReactWebComponent = $.extend(window.ReactWebComponent, (function () {

    var CommentID = 3;

    var CommentBox = React.createClass({
        loadCommentsFromServer: function () {
            var _this = this;
            $.ajax({
                url: _this.props.get.url,
                type: "GET",
                data: _this.props.get.data,
                dataType: "json",
                cache: false,
                success: function (data) {
                    if (/success/i.test(data.ResultCode)){
                        _this.setState({data: data.Data});
                    }
                },
                error: function (xhr, status, err) {
                    console.error(_this.props.get.url, status, err.toString());
                }
            });
        },
        handleCommentSubmit: function (comment) {
            var _this = this;
            comment.id = CommentID++;
            _this.setState({ data: this.state.data.concat(comment) });
            //TODO: send comment request to server
        },
        getInitialState: function () {
            return {data: []};
        },
        componentDidMount: function () {
            this.loadCommentsFromServer();
        },
        render: function () {
            return (
                <div className="comment-box">
                    <CommentList data={this.state.data} />
                    <CommentForm onCommentSubmit={this.handleCommentSubmit} />
                </div>
            );
        }
    });

    var CommentList = React.createClass({
        render: function () {
            var nodes = this.props.data.map(function (comment) {
                return (
                    <Comment author={comment.author} key={comment.id}>
                        {comment.text}
                    </Comment>
                )
            });
            return (
                <div className="comment-list">
                    {nodes}
                </div>
            );
        }
    });

    var CommentForm = React.createClass({
        handleSubmit: function (e) {
            e.preventDefault();
            var _this = this;
            var author = _this.refs.author.value.trim();
            var text = _this.refs.text.value.trim();
            if (!author || !text){
                return;
            }
            _this.props.onCommentSubmit({ author: author, text: text });
            //_this.refs.author.value = "";
            _this.refs.text.value = "";
        },
        render: function () {
            return (
                <form id="CommentForm" onSubmit={this.handleSubmit}>
                    <div className="comment-form">
                        <p>
                            <input ref="author" type="text" className="form-control" placeholder="用户名" required />
                        </p>
                        <p>
                            <textarea ref="text" className="form-control" placeholder="评论内容" required></textarea>
                        </p>
                        <p className="text-right">
                            <button type="submit" className="btn btn-theme">发布</button>
                        </p>
                    </div>
                </form>
            );
        }
    });

    var Comment = React.createClass({
        render: function () {
            return (
                <div className="comment">
                    { this.props.author }：
                    { this.props.children }
                </div>
            )
        }
    })

    function WebSocketClient(onmessage) {

        if (!window.WebSocket){
            console.log("您的浏览器不支持WebSocket");
            return;
        }

        var socket = new WebSocket("ws://127.0.0.1:15000");

        socket.onopen = function (e) {
            console.log("websocket connected");
        }

        socket.onmessage = function (e) {
            onmessage && onmessage(e.data);
        }

        socket.onclose = function (e) {
            console.log("websocket closed");
        }

        socket.onerror = function (e) {
            console.log(e.error);
        }

        function send(message, sendTo) {
            var data = JSON.stringify({
                Type: sendTo || "SendToAll",
                Content: message
            });
            socket.send(data);
        }

        this.send = send;
    };

    return {
        CommentBox: CommentBox,
        CommentList: CommentList
    }

})());